<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/index.css">
	</head>

	<body>
		<div id="app" v-cloak>

			<!--loading-->
			<div id="mloading" class="modal fade">
				<div id="loading" class="loading">加载中...</div>
			</div>
			<!--错误消息提示-->
			<div class="alert alert-danger errortips dnone">
				<strong class="etipsmsg"></strong>
			</div>
			<!--正确消息提示-->
			<div class="alert alert-success successtips dnone">
				<strong class="stipsmsg"></strong>
			</div>

			<div>
				<div class="form-group">
					<label>客户ID：</label>
					<input type="text" id="id_txt_customerid" class="form-control">
					<div class="clearfix"></div>
				</div>
				<div class="form-group">
					<label>月份(yyyymm)：</label>
					<input type="text" id="id_txt_month" class="form-control">
					<div class="clearfix"></div>
				</div>
				<button type="button" class="btn btn-success">查询</button>
			</div>

			<table class="table table-hover">
				<tr>
					<th>客户</th>
					<th>姓名</th>
					<th>时间</th>
					<th>产品</th>
					<th>数量</th>
					<th>金额</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in dataGoods" :key="index">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.optime}}</td>
					<td>{{item.product}}</td>
					<td>{{item.quantity}}</td>
					<td>{{item.ttprice}}</td>
					<td>
						<button data-toggle="modal" data-target="#myModal">修改</button>
						<button>删除</button>
					</td>
				</tr>
			</table>
			<!-- 分页 -->
			<div class="total">共<span class="sColor">{{total}}</span>条记录</div>
			<ul class="pagination">
				<li>
					<a href="#">&laquo;</a>
				</li>
				<li v-for="(item,index) in pages" :key="index" @click="getGoods(index+1)">
					<a href="#">{{index+1}}</a>
				</li>
				<li>
					<a href="#">&raquo;</a>
				</li>
			</ul>

			<!-- 修改模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">修改客户<span class="sColor"></span>的数量金额</h4>
						</div>
						<div class="modal-body">
							<table border="" cellspacing="" cellpadding="">
								<tr>
									<td>数量：<b>*</b></td>
									<td>
										<input type="text" class="form-control" />
									</td>
								</tr>
								<tr>
									<td>金额：<b>*</b></td>
									<td>
										<input type="text" class="form-control" />
									</td>
								</tr>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal">提交更改</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

		</div>
		<script src="js/vue2.5.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					dataGoods: [], //初始化页面所取的数据
					page: 1,
					pages: null,
					total: ''
				},
				mounted() {
					$('#mloading').modal({
						backdrop: 'static',
						keyboard: false
					}, 'show');
					this.getGoods(this.page);
				},
				methods: {
					getGoods: function(page) {
						$.ajax({
							type: "get",
							url: "response" + page + ".json",
							async: true,
							data: {
								pageNum: page
							},
							success: (res) => {
								$('#mloading').modal('hide');
								console.log('data', res.data)
								this.dataGoods = res.data.list;
								this.total = res.data.total;
								let oPages = res.data.total;
								let oPageSize = res.data.pageSize;
								let oPageNum = parseInt(oPages / oPageSize);
								let yushu = Number(oPages % oPageSize);
								if(yushu > 0) {
									oPageNum = oPageNum + 1;
								}
								console.log('oPageNum', oPageNum)
								this.pages = oPageNum;
								setTimeout(()=>{
									if($('.pagination li').length > 2) {
										$('.pagination li').removeClass('active');
								 		$('.pagination li').eq(page).addClass('active');
						           }
								})
							}
						});
					}
				}
			})
		</script>
	</body>

</html>